<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Estore购物商城</title>

    <link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
    <!--[if IE 6]><link rel="stylesheet" href="/style.ie6.css" type="text/css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="/style.ie7.css" type="text/css" media="screen" /><![endif]-->
    
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
        function getXmlHttpRequest(){
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();

            }else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlhttp;
        }

        function emailExists(){
            var email = document.getElementById("email").value;
            var semail = document.getElementById("semail");
            //判断用户有没有输入用户名，如果没有输入，直接提示用户名不能为空
            if( email == null || email == "" || !(email.match("\\w+@\\w+(\\.\\w+){1,3}")) ){
                semail.innerHTML = "邮箱不合法".fontcolor("red");
            }else{
                var xmlhttp = getXmlHttpRequest();

                xmlhttp.onreadystatechange = function(){
                    if (xmlhttp.readyState==4 && xmlhttp.status==200){
                        semail.innerHTML=xmlhttp.responseText;
                    }
                }
                xmlhttp.open("POST","/validata.action",true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send("email="+email);
                return ;
            }
        }
    </script>
</head>
<body>
<div id="art-main">
        <div class="art-sheet">
            <div class="art-sheet-tl"></div>
            <div class="art-sheet-tr"></div>
            <div class="art-sheet-bl"></div>
            <div class="art-sheet-br"></div>
            <div class="art-sheet-tc"></div>
            <div class="art-sheet-bc"></div>
            <div class="art-sheet-cl"></div>
            <div class="art-sheet-cr"></div>
            <div class="art-sheet-cc"></div>
            <div class="art-sheet-body">
                <%@include file="/header.jsp" %>
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content">
                            <div class="art-post">
                                <div class="art-post-tl"></div>
                                <div class="art-post-tr"></div>
                                <div class="art-post-bl"></div>
                                <div class="art-post-br"></div>
                                <div class="art-post-tc"></div>
                                <div class="art-post-bc"></div>
                                <div class="art-post-cl"></div>
                                <div class="art-post-cr"></div>
                                <div class="art-post-cc"></div>
                                <div class="art-post-body">
									  <!-- 注册表单 -->
									    <div class="register_content">
										    <div class="register_title_bg"><h3>欢迎注册Estore商城</h3>您所提供的资料不会做其他用途，敬请安心填写。</div>
										    <div class="register_dotted_bg"></div>
										    <div class="register_message">
										    <!-- 
										    	注册页面提交数据的form表单
										    	1、注册form表单中的提交action 的地址
										     	2、给form表单中的所有输入项添加name属性，
										     		注意这里的name属性的值，必须和数据库中的user表的属性一致
										     -->
										    <font color="red">${msg }</font>
										    <form action="/regist.action" method="post">
										     <dl class="register_row">
										        <dt>Email地址：</dt>
										        <dd><input id="email" type="text" name="email" class="register_input" onblur="emailExists();"/>
                                                    <span id="semail"></span>
                                                </dd>
										      </dl>
										      <dl class="register_row">
										         <dt>设置昵称：</dt>
										         <dd><input id="nickName" type="text"  name="nickname" class="register_input"/></dd>
										         <dd></dd>
										      </dl>
										     <dl class="register_row">
										         <dt>设定密码：</dt>
										         <dd><input id="pwd" type="password" name="password" class="register_input"/></dd>
										     </dl> 
										     <dl class="register_row"> 
										         <dt>再输入一次密码：</dt>
										         <dd><input id="repwd" type="password" name="repassword" class="register_input"/></dd>
										     </dl>
										     <dl class="register_row">
										        <dt>验证码：</dt>
										        <dd><input class="register_input" name="checkImg" type="text" /> </dd>
										        <dd><img id="loginform:vCode" src="${pageContext.request.contextPath }/validatecode.jsp"
													onclick="javascript:document.getElementById('loginform:vCode').src='${pageContext.request.contextPath }/validatecode.jsp?'+Math.random();" /></dd>
										     </dl>
										      <div class="registerBtn"><input id="registerBtn" type="image" src="/images/register_btn_out.gif" /></div>
										   </form>
										   <!-- 注册表单的结束 -->
										    </div>
										  </div>
									  <!-- 注册表单结束 -->                        
                           			<div class="cleared"></div>
                                </div>
                            </div>
                        </div> 
                        <%@include file="/sidebar.jsp" %>
                    </div>
                </div>
                <div class="cleared"></div>
                <%@include file="/footer.jsp" %>
        		<div class="cleared"></div>
            </div>
        </div>
        <div class="cleared"></div>
    </div>
    
</body>
</html>